<template>
  <div class="collection">
    <van-nav-bar
      title="我的收藏"
      left-text="返回"
      :fixed="true"
      left-arrow
      @click-left="back"
    ></van-nav-bar>
    <div class="content">
      <div
        class="bs-item"
        v-for="(item, index) in collectionData"
        :key="index"
        @click="toDetail(item.pid)"
      >
      <span class="hot" v-if="item.isHot == 1">hot</span>
        <img :src="item.largeImg" alt="" />
        <p class="name">{{ item.name }}</p>
        <p class="enname">{{ item.enname }}</p>
        <p class="price">&yen;{{ item.price }}</p>
      </div>
    </div>
    <van-empty description="你尚未登录" v-if="!isLogin">
      <van-button round type="danger" class="bottom-button" @click="toLogin">去登录</van-button>
    </van-empty>
    <van-empty
      description="你还没有收藏商品"
      v-if="isLogin==true&&collectionData.length == 0"
    />
  </div>
</template>

<script>
export default {
  name: "Collection",
  data() {
    return {
      isLogin: true,
      collectionData: [],
    };
  },
  created() {
    this.getCollectionData();
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    toDetail(pid){
      this.$router.push({name:'Detail',params:{pid}})
    },
    toLogin(){
      this.$router.push({name:'Login'})
    },
    getCollectionData() {
      this.axios({
        method: "get",
        url: "/findAllLike",
      }).then((result) => {

        if(result.data.code == 700){
            this.isLogin = false
        }
        if(result.data.code == 2000){
            this.collectionData = result.data.result
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.collection {
  padding-top: 76px;
  .van-nav-bar--fixed{
    padding-top: 30px;
    background-color: #0022ab;
  }
  /deep/.van-nav-bar__title{
    color: #fff;
  }
  /deep/.van-icon{
    color: #fff;
  }
  /deep/.van-nav-bar__text{
    color: #fff;
  }
  .content {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 10px;
    .bs-item {
      width: 160px;
      background-color: #fff;
      padding: 10px;
      border-radius: 10px;
      position: relative;
      margin: 8px;
      span {
        background-color: #0022ab;
        color: #fff;
        padding: 5px;
        position: absolute;
        left: 20px;
        border-radius: 0 0 5px 5px;
      }
      img {
        width: 100%;
        border-radius: 8px;
        margin-bottom: 10px;
      }
      .name {
        font-size: 15px;
        color: #666;
        margin-bottom: 5px;
      }
      .enname {
        font-size: 12px;
        color: #999;
        margin-bottom: 10px;
        height: 14px;
        overflow: hidden;
      }
      .price {
        font-size: 15px;
        color: #0022ab;
        font-weight: 600;
      }
    }
  }
}
</style>